<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title" style="color: #fff;">{{title}}</h1>
		</header>
		<div class="content" v-if="data!==null">
			<img :src=data.houseImg alt="" class="img" v-if="data.houseImg!=null" />
			<img src="static/images/noBg.png" alt="" class="img" v-if="data.houseImg==null"/>
			<!--名称、标签、以及排名-->
			<div class="nameAndLabel">
				<p class="name">{{data.houseName}}</p>
				<ul class="label">
					<li v-for="item in label">{{item}}</li>
				</ul>
				<p class="ranker" v-if="noNumber">
					<span v-if="ranking!=0">自定义性价比排名：第{{ranking}}名</span>
				</p>
			</div>

			<div class="type">
				<span>综合性价比</span>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">性价比星级</span>
						<div class="mui-media-body star" v-if="noNumber">
							<img v-for="item in starArr" :src=item alt="" />
						</div>
						<div class="mui-media-body star" v-if="!noNumber">待定</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">性价比得分</span>
						<div class="mui-media-body" v-if="noNumber">{{data.houseCore}}分</div>
						<div class="mui-media-body" v-if="!noNumber">待定</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">价格</span>
						<div class="mui-media-body" v-if="noNumber">{{data.housePrice}}元/平</div>
						<div class="mui-media-body" v-if="!noNumber">待定</div>
					</a>
				</li>
			</ul>
			<div class="type" v-on:click="gofx">
				<span>分项功能</span>
				<i class="mui-icon mui-icon-arrowright rArrow" ></i>
			</div>
			<ul class="con" v-on:click="gofx" style="display: none;">
				<li><div style="float: left;">品牌实力:</div>
					<div v-if="data.xingJiaBiCore.pinPaiShiLi">
						<span>
							<img v-for="item in pinPaiShiLi" :src=item  alt="" />
				 		</span>
						<span>{{data.xingJiaBiCore.pinPaiShiLi}}分</span>
					</div>
					<div  v-if="!data.xingJiaBiCore.pinPaiShiLi" style="color: red;">
						待定
					</div>
				</li>
				<li><div style="float: left;">规划景观:</div>
					<div v-if="data.xingJiaBiCore.sheQuGuiHuaYuJingGuan">
						<span>
							<img v-for="item in guiHuaJingGuan" :src=item  alt="" />
				 		</span>
						<span>{{data.xingJiaBiCore.sheQuGuiHuaYuJingGuan}}分</span>
					</div>
					<div v-if="!data.xingJiaBiCore.sheQuGuiHuaYuJingGuan"  style="color: red;">
						待定
					</div>
				</li>
				<li><div style="float: left;">社区配套:</div>
					<div v-if="data.xingJiaBiCore.sheQuPeiTao">
						<span>
							<img v-for="item in sheQuPeiTao" :src=item  alt="" />
				 		</span>
						<span>{{data.xingJiaBiCore.sheQuPeiTao}}分</span>
					</div>
					<div v-if="!data.xingJiaBiCore.sheQuPeiTao" style="color: red;">
						待定
					</div>
				</li>
				<li><div style="float: left;">物业服务:</div>
					<div v-if="data.xingJiaBiCore.wuYeFuWu">
						<span>
							<img v-for="item in wuYeFuWu" :src=item  alt="" />
				 		</span>
						<span>{{data.xingJiaBiCore.wuYeFuWu}}分</span>
					</div>
					<div  v-if="!data.xingJiaBiCore.wuYeFuWu" style="color: red;">
						待定
					</div>
				</li>
				<li><div style="float: left;">地段配置:</div>
					<div v-if="data.xingJiaBiCore.diDuanPeiTao">
						<span>
							<img v-for="item in diDuanPeiZhi" :src=item  alt="" />
				 		</span>
						<span>{{data.xingJiaBiCore.diDuanPeiTao}}分</span>
					</div>
					<div v-if="!data.xingJiaBiCore.diDuanPeiTao" style="color: red;">
						待定
					</div>
				</li>
			</ul>
		</div>
		<div class="leidatuSwiper">
			<div class="swiper-leidatu">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">
			        	<div class="leidatuCharts"  v-on:click="gofx">
							<div class="star0 star1">
								<img v-for="item in pinPaiShiLi" :src=item  alt="" style="opacity: 0.7;width: 12px;"/>
							</div>
							<div class="star0 star2">
								<img v-for="item in guiHuaJingGuan" :src=item  alt="" style="opacity: 0.7;width: 12px;"/>
							</div>
							<div class="star0 star3">
								<img v-for="item in sheQuPeiTao" :src=item  alt="" style="opacity: 0.7;width: 12px;"/>
							</div>
							<div class="star0 star4">
								<img v-for="item in wuYeFuWu" :src=item  alt="" style="opacity: 0.7;width: 12px;"/>
							</div>
							<div class="star0 star5">
								<img v-for="item in diDuanPeiZhi" :src=item  alt="" style="opacity: 0.7;width: 12px;"/>
							</div>
							<div class="chart leidatu" id="charts">
								
							</div>	
						</div>
			        </div>
			    </div>
			</div>
		</div>
		
		<div class="local">
			<div class="type">
				<span>周边位置</span>
			</div>
			<div style="padding: 0 10px;" class="header">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" v-on:click="clickTab(0,data.map[0].lng,data.map[0].lat)">
						交通
					</a>
					<a class="mui-control-item" v-on:click="clickTab(1,data.map[0].lng,data.map[0].lat)">
						商业
					</a>
					<a class="mui-control-item" v-on:click="clickTab(2,data.map[0].lng,data.map[0].lat)">
						教育
					</a>
					<a class="mui-control-item" v-on:click="clickTab(3,data.map[0].lng,data.map[0].lat)">
						医院
					</a>
				</div>
			</div>
			<div class="contain" id="allmap">
				
			</div>
		</div>
		<div class="dongtai">
			<div class="type">
				<span>房价走势</span>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="lineChart">

				</div>
			</div>
			<div class="type">
				<span>主力户型</span>
			</div>

			<div class="mui-slider-item huixing">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item,index) in huXing">
							<a v-if="item.houseArea" :data-index="index">
								<img :src=item.src @click="open">
								<p>{{item.houseShiTing}} {{item.houseArea}}m²</p>
								<p><span>{{item.houseStatus}}在售</span> {{item.houseAllPrice}}</p>
							</a>
							<a v-if="!item.houseArea">暂无数据</a>
						</div>
					</div>
				</div>
			</div>
			
		</div>

		<div class="swiperTop">
			<div class="swiper-container1">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide" v-for="item in pics">
			        	<img :src=item.src alt="" />
			        </div>
			    </div>
			</div>
		</div>
	</div>
</template>
<script>
	import Swiper from 'swiper';

	// 引入基本模板
	let echarts = require('echarts/lib/echarts');
	// 引入柱状图组件
	require('echarts/lib/chart/line');
	require('echarts/lib/chart/radar');
	// 引入提示框和title组件
	 require('echarts/lib/component/tooltip');
	// require('echarts/lib/component/title'); 

	export default {
		data() {
			return {
				create: '',
				data: null,
				title: '',
				label: [],
				starArr: [],
				pinPaiShiLi: [],
				guiHuaJingGuan: [],
				sheQuPeiTao: [],
				wuYeFuWu: [],
				diDuanPeiZhi: [],
				lng: 0,
				lat: 0,
				huXing: [],
				pics:[],
				ranking:'',
				noNumber:true,
				flagXQ:false,
				echartsPic:''
			}
		},
		created: function() {
			
		},
		mounted: function() {
			let that = this;
			let ajaxURL = localStorage.getItem('ajaxURL');
			let id = this.$route.query.id;
			let type = this.$route.query.type;

			if(type === 'new') {
				that.title = '楼盘详情';
			} else if(type === 'xiaoQu') {
				that.title = '小区详情';
			}
			
			//进入分项指标页面
			
			
			that.ranking=location.hash.split('=')[3];
			$.ajax({
				type: 'get',
				url: `${ajaxURL}/houseweb/H5/detailHouse.do`,
//				url:"http://192.168.0.162:8080/houseweb/H5/detailHouse.do",
				data: {
					city: localStorage.getItem('city'),
					houseType: type,
					houseId: id
				},
				success: function(res) {
					var data = JSON.parse(res)
					if(data.status==1000){
						var char = data.data.xingJiaBiCore;
						if(char.length!=0){
							if(that.$route.query.type=='new'){
								var score1 = char[0].pinPaiShiLi
								var score2 = char[0].sheQuGuiHuaYuJingGuan
								var score3 = char[0].sheQuPeiTao
								var score4 = char[0].wuYeFuWu
								var score5 = char[0].diDuanPeiTao;
							}else{
								var score1 = char[1].otherScores
								var score2 = char[2].otherScores
								var score3 = char[3].otherScores
								var score4 = char[4].otherScores
								var score5 = char[0].otherScores;
							}
							
						}else{
							var score1 = 0
							var score2 = 0
							var score3 = 0
							var score4 = 0
							var score5 =0
						}
						
						//雷达图
						var score = [score1,score2,score3,score4,score5]
						that.charts(score);
						
						if(data.data.label === '') {
							that.label = [];
						} else {
							that.label = data.data.label[0].tagLabel.split(',');
						}
						
						if(data.data.houseCore==null){
							that.noNumber=false
						}else{
							that.noNumber=true
						}
						data.data.houseCore = parseFloat(data.data.houseCore).toFixed(2)
						that.data = data.data;
						that.huXing = data.data.huXing;
						for(var i=0;i<that.huXing.length;i++){
							that.pics.push({width:'355px',height:'280px',src:that.huXing[i].src})
						}
						that.starArr = that.hasStar(data.data.houseCore);
						if(data.data.xingJiaBiCore.length!=0){
							if(that.$route.query.type=='new'){
								that.pinPaiShiLi = that.hasStar(data.data.xingJiaBiCore[0].pinPaiShiLi);
								that.guiHuaJingGuan = that.hasStar(data.data.xingJiaBiCore[0].sheQuGuiHuaYuJingGuan);
								that.sheQuPeiTao = that.hasStar(data.data.xingJiaBiCore[0].sheQuPeiTao);
								that.wuYeFuWu = that.hasStar(data.data.xingJiaBiCore[0].wuYeFuWu);
								that.diDuanPeiZhi = that.hasStar(data.data.xingJiaBiCore[0].diDuanPeiTao);
							}else{
								that.pinPaiShiLi = that.hasStar(data.data.xingJiaBiCore[1].otherScores);
								that.guiHuaJingGuan = that.hasStar(data.data.xingJiaBiCore[2].otherScores);
								that.sheQuPeiTao = that.hasStar(data.data.xingJiaBiCore[3].otherScores);
								that.wuYeFuWu = that.hasStar(data.data.xingJiaBiCore[4].otherScores);
								that.diDuanPeiZhi = that.hasStar(data.data.xingJiaBiCore[0].otherScores);
							}
							
						}
						
						that.lng += data.data.map[0].lng;
						that.lat += data.data.map[0].lat;
						that.creater(that.lng, that.lat, '交通');
						that.flagXQ=true;
					}
					
					var dataPrice = JSON.parse(sessionStorage.getItem('screenPrice'))
					if(that.$route.query.type=='new'){
						var priceOld = data.data.fangJiaZouShi.fangJiaZouShiPrice;
						var monthOld = data.data.fangJiaZouShi.fangJiaZouShiMonth;
						
						var max=[]
						for(var i=monthOld.length-1;i>=0;i--){
							var year = (new Date).getFullYear();
							var arr = [];
							
							if(monthOld[i]>monthOld[monthOld.length-1]){
								year=year-1;
								for(var j=0;j<priceOld.length;j++){
									if(monthOld[i]==parseInt(priceOld[j].create_time.substring(5,7)) && year == parseInt(priceOld[j].create_time.substring(0,4))){
										arr.push(parseInt(priceOld[j].create_time.substring(8,10)))
									}
								}
							}else{
								year=year;
								for(var j=0;j<priceOld.length;j++){
									if(monthOld[i]==parseInt(priceOld[j].create_time.substring(5,7)) && year == parseInt(priceOld[j].create_time.substring(0,4))){
										arr.push(parseInt(priceOld[j].create_time.substring(8,10)))
									}
								}
							}
							
							if(arr.length>0){
								arr=Math.max.apply(null,arr);
								arr = parseInt(arr/10)==0?'0'+arr:arr;
							}else{
								arr=null;
							}
							var month = parseInt(monthOld[i]/10)==0?('0'+monthOld[i]):monthOld[i]
							max.push(year+'-'+month+'-'+arr)
						}
						var priceRank=[];
						for(var i=0;i<max.length;i++){
							if(max[i].substring(8,10)=='nu'){
								var ko = '';
								priceRank.push(ko);
							}else{
								for(var j=0;j<priceOld.length;j++){
									if(priceOld[j].create_time ==max[i]){
										priceRank.unshift(priceOld[j].avg_price)
									}
								}
							}
						}
						that.echartser(data.data.fangJiaZouShi.fangJiaZouShiMonth, priceRank,dataPrice[dataPrice.length-1].PRICE);
					}else if(that.$route.query.type=='xiaoQu'){
						var priceOld = data.data.fangJiaZouShi.fangJiaZouShiPrice;
						var monthOld = data.data.fangJiaZouShi.fangJiaZouShiMonth;
						
						var max=[]
						for(var i=monthOld.length-1;i>=0;i--){
							var year = (new Date).getFullYear();
							var arr = [];
							
							if(monthOld[i]>monthOld[monthOld.length-1]){
								year=year-1;
								for(var j=0;j<priceOld.length;j++){
									if(monthOld[i]==parseInt(priceOld[j].record_time.substring(5,7)) && year == parseInt(priceOld[j].record_time.substring(0,4))){
										arr.push(priceOld[j].record_time.substring(5,7))
										
									}
								}
							}else{
								year=year;
								for(var j=0;j<priceOld.length;j++){
									if(monthOld[i]==parseInt(priceOld[j].record_time.substring(5,7)) && year == parseInt(priceOld[j].record_time.substring(0,4))){
										arr.push(priceOld[j].record_time.substring(5,7))
										
									}
								}
							}
							max.push(year+'-'+arr);
						}
						
						var priceRank=[];
						for(var i=0;i<max.length;i++){
							
							for(var j=0;j<priceOld.length;j++){
								if(priceOld[j].record_time ==max[i]){
									priceRank.unshift(priceOld[j].average_price)
								}
							}
						}
						that.echartser(data.data.fangJiaZouShi.fangJiaZouShiMonth, priceRank,dataPrice[dataPrice.length-1].PRICE);
					}
					
				
				}
			});
			
			new Swiper('.swiper-container1', {
				slidesPerView: 1,
                observer:true,
                observeParents:true
			});
			new Swiper('.swiper-container', {
				slidesPerView: 3,
			});
			new Swiper('.swiper-leidatu', {
				slidesPerView: 1,
			});
			$('.swiperTop').click(function(event){
				$(this).slideToggle();
			})
			$('.swiperTop div').click(function(event){
				event.stopPropagation();
			})
			
		},
		methods: {
			gofx: function(){
				let id = this.$route.query.id;
				let type = this.$route.query.type;
				let rank = this.$route.query.ranking;
				this.goNewDetail(id,type,rank)
			},
			goNewDetail: function(id, houseType,rank) {
//				console.log(houseType)
				this.$router.push({
					path: '/evaluate',
					name: 'evaluate',
					query: {
						id: id,
						type: houseType,
						cityId:localStorage.getItem('city')
					}
				});
			},
			back() {
				let data = JSON.parse(localStorage.getItem('data'))
				data.page=1;
				localStorage.setItem('data',JSON.stringify(data)) 
				this.$router.go(-1) 
			},
			charts:function(score){
				 var $ctn = $('#charts');
		          var $parent = $ctn.parent();
		          $ctn.width($parent.width()*1.9);
		          $ctn.height($parent.height()*1.2);
		          var charts = echarts.init($ctn.get(0));
				var option = {
				    tooltip: {
				        trigger: 'axis'
				    },
				    radar: [
				        {
				            indicator: [
				                {text: '品牌实力', max: 100},
				                {text: '规划景观', max: 100},
				                {text: '社区配套', max: 100},
				                {text: '物业服务', max: 100},
				                {text: '地段配置', max: 100}
				            ],
				            center: ['25%','40%'],// 坐标轴线
			                axisLine: {
			                    show: false
			                },
			                // 网格背景颜色
			                splitArea: {
			                    show: true,
			                    areaStyle: {
//			                        color: ['#c6c6c6', '#fff']
			                    }
			                },
			 
			                //背景网格线
			                splitLine: {
			                    show: true,
			                    lineStyle: {
//			                        color: ["#fff"]
			                    }
			                },
				            radius: 80
				        }
				    ],
				    series: [
				        {
				            type: 'radar',
				             tooltip: {
//				                trigger: 'item'
				            },
				            itemStyle: {
				            	normal: {
				            		lineStyle:{
				            			color:'#50b2df'
				            		},
				            		areaStyle: {
                                        type: 'default',
                                        opacity: 0.7, // 图表中各个图区域的透明度
                                        color: "#50b2db" // 图表中各个图区域的颜色
                                    }
				            	}
				            },
				            data: [
				                {
				                    value: score,
				                    itemStyle: {
	                                    normal: {
	                                        areaStyle: {
	                                            type: '',
	                                            opacity: 0.3, // 图表中各个图区域的透明度
	                                            color: "blue" // 图表中各个图区域的颜色
	                                        }
	                                    }
                                  }
				                }
				            ]
				        }
				    ]
				};


				charts.setOption(option);
				$('.leidatuCharts').css({'left':'50%','transform':'translateX(-50%)'})
				
				window.onresize = charts.resize;
			},
			echartser: function(monthArr, priceArr,prices) {
				let tuOneLeft = echarts.init(document.getElementById('lineChart'));
				let optionOneLeft = {

					grid: {
						borderColor: '#0186c2',
						borderWidth: 1,
						left: 57,
						top: 27,
						bottom: 32,

					},

					xAxis: {
						type: 'category',
						name: '/月',
						data: monthArr,
						nameTextStyle: {
//							color: '#0186c2',
						},
						nameGap: 10,
						axisLine: {
							lineStyle: {
//								color: '#0186c2',
							}
						},
						axisTick: {
//							show: false,
						}
					},
					yAxis: {
						type: 'value',
						name: '元/m²',
						min: 0,
						max: prices,
						interval: prices/4,
						nameTextStyle: {
//							color: '#0186c2',
						},
						nameGap: 10,
						axisLine: {
							lineStyle: {
//								color: '#0186c2',
							}
						},
						axisTick: {
//							show: false,
						},

					},
					dataZoom: [
			            {
			                type: 'slider',
			                show: true,
			                start: 94,
			                end: 100
			            }
			        ],
					series: [{
						data: priceArr,
						type: 'line',
						hoverAnimation: true,
						lineStyle: {
							color: '#0186C2',
						},
						lineWidth:1,
						itemStyle: {
							normal: {
								color: '#fff',
								borderColor: '#0186C2',
							},

						},
						symbol: 'circle', //设定为实心点
						symbolSize: 6, //设定实心点的大小
 
					}],

					tooltip: {
						trigger: 'item',
						formatter: '{c}元/m²<br/>{b}月',
					}
				};
				tuOneLeft.setOption(optionOneLeft);
				window.onresize = tuOneLeft.resize;

				$("#jianTouLeft").css({
					"background-image": "url(static/images/left-botton-.png)"
				});
				$("#jianTouRight").css({
					"background-image": "url(static/images/right-botton-.png)"
				});
			},
			creater: function(lng, lat, type) {
				var map = new BMap.Map("allmap"); // 创建Map实例
				var mPoint = new BMap.Point(lng, lat);
				map.enableScrollWheelZoom();
				map.centerAndZoom(mPoint, 15);
				map.enableDragging();

				var top_right_navigation = new BMap.NavigationControl({
					anchor: BMAP_ANCHOR_TOP_RIGHT,
					type: BMAP_NAVIGATION_CONTROL_SMALL
				}); //右上角，仅包含平移和缩放按钮

				map.addControl(top_right_navigation);

				var circle = new BMap.Circle(mPoint, 1500, {
					fillColor: "white",
					strokeWeight: 1,
					fillOpacity: 0.4,
					strokeOpacity: 0.3
				});
				map.addOverlay(circle);
				var local = new BMap.LocalSearch(map, {
					renderOptions: {
						map: map,
						autoViewport: false
					}
				});
				local.searchNearby(type, mPoint, 1000);
				var myIcon = new BMap.Icon("static/images/position.png", new BMap.Size(24, 30));
				var marker = new BMap.Marker(mPoint, {
					icon: myIcon
				}); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore / 20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str != 5) {
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) < 5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			clickTab: function(x, lng, lat) {
				$('#segmentedControl a').eq(x).addClass('mui-active').siblings('a').removeClass('mui-active');
				// $('.contain div').eq(x).addClass('mui-active').siblings('div').removeClass('mui-active');

				if(x === 0) {
					this.creater(lng, lat, '交通');
				}
				if(x === 1) {
					this.creater(lng, lat, '商业');
				}
				if(x === 2) {
					this.creater(lng, lat, '教育');
				}
				if(x === 3) {
					this.creater(lng, lat, '医院');
				}
			},
			open: function(){
				$('.swiperTop').slideToggle();
			}
		}
	}
</script>
<style scoped>
	.img {
		height: 180px;
	}
	
	#allmap {
		width: 100%;
		height: 250px;
	}
	
	.nameAndLabel {
		width: 100%;
		height: auto;
	}
	
	.nameAndLabel p {
		text-indent: 4%;
	}
	
	.nameAndLabel .name {
		line-height: 22px;
		color: #333;
		font-size: 14px;
		font-weight: bolder;
	}
	
	.nameAndLabel .label {
		list-style: none;
		display: flex;
		padding-left: 0px;
	}
	
	.nameAndLabel .label li {
		text-align: center;
		width: 20%;
		height: 22px;
		font-size: 13px;
		border: 1px solid #c6c6c6;
		border-radius: 4px;
		margin-right: 5%;
		color: #c6c6c6;
	}
	
	.nameAndLabel .label li:first-child {
		margin-left: 3.5%;
	}
	
	.nameAndLabel .ranker {
		font-size: 14px;
	}
	
	.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	    box-shadow: none;
	}
	
	.mui-bar-nav a {
		color: #fff;
	}
	
	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}
	
	.mui-bar .mui-title {
		line-height: 50px;
	}
	
	.mui-tab-item1 {
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #929292;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon {
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
		font-size: 11px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.content {
		padding-top: 50px;
		padding-bottom: 10px;
		background-color: #fff;
		overflow: hidden;
	}
	
	.content .img {
		width: 100%;
	}
	
	.content img {
		width: 15px;
	}
	
	.type {
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		font-weight: bold;
	}
	
	.mui-grid-view.mui-grid-9 {
		background-color: #fff;
		border: 0;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: 0;
		padding: 0;
		font-size: 14px;
	}
	
	.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
		color: red;
		font-size: 14px;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
		padding: 0;
	}
	
	.year {
		font-size: 14px;
		padding-left: 15px;
		color: #0186c2;
	}
	
	.year .zijian {
		color: #fe6638;
		margin-left: 20px;
	}
	
	.con {
		list-style: none;
		padding: 0 15px;
		font-size: 14px;
		margin: 0;
	}
	
	.con li {
		width: 100%;
		float: left;
		color: #ACACB4;
		padding: 5px 0;
	}
	
	.con li span {
		color: #000;
		margin-left: 6px;
	}
	
	.con li span:last-child {
		color: #e51c23;
	}
	
	.content .xingxi {
		font-size: 14px;
		line-height: 34px;
		width: 90%;
		padding: 0;
		margin: 0 15px;
	}
	
	.local,
	.dongtai {
		margin-top: 10px;
		background-color: #fff;
	}
	
	.mui-segmented-control .mui-control-item {
		color: #000;
		border-color: #fff;
	}
	
	.mui-segmented-control {
		border-color: #fff;
		width: 60%;
		margin: 0 20%;
	}
	
	.mui-segmented-control .mui-control-item.mui-active {
		background: #fff;
		color: #0186c2;
	}
	
	.mui-segmented-control .mui-control-item {
		line-height: 30px;
	}
	
	.mui-control-content>img {
		width: 100%;
	}
	
	.mui-control-content span {
		padding-left: 15px;
		font-size: 12px;
		color: #777;
	}
	
	.mui-control-content span img {
		width: 13px;
	}
	
	.chart {
		height: 200px;
	}
	.leidatuCharts {
		height: 300px;
    	width: 300px;
		position: relative;
		overflow: hidden;
		background-color: #fff;
	}
	.leidatuCharts .star0 {
		position: absolute;  
    	width: 100px;
	}
	.leidatuCharts .star1 {
		left: 118px;
		top: 16px;
	}
	.leidatuCharts .star2 {
		left: 1px;
		top: 120px;
	}
	.leidatuCharts .star3 {
		left: 37px;
		top: 225px;
	}
	.leidatuCharts .star4 {
		left: 196px;
		top: 225px;
	}
	.leidatuCharts .star5 {
		left: 230px;
		top: 119px;
	}
	.leidatu {
    	/*position: absolute!important;*/
	    /*bottom: 10px;
	    right: 10px;*/
	    /*width: 150px;
    	height: 150px;*/
	}
	.mui-content-padded {
		margin: 0 10px;
	}
	
	#slider {
		margin-bottom: 100px;
	}
	
	.mui-slider-item {
		width: 94.5%;
		margin: 0 auto;
		position: relative;
	}
	
	.swiper-button-prev {
		height: 18px;
		position: absolute;
		left: -2%;
	}
	
	.swiper-button-next {
		height: 18px;
		position: absolute;
		right: -2%;
	}
	
	.mui-slider-item a {
		float: left;
		display: inline-block;
		width: 112px;
		margin-left: 7%;
		height: 150px;
	}
	
	.mui-slider-item a img {
		width: 112px;
		height: 82px;
		margin-bottom: 10px;
	}
	
	.mui-slider-item a p {
		line-height: 14px;
		font-size: 12px;
	}
	
	.mui-slider-item a p span {
		background-color: #f60;
		color: #fff;
		padding: 2px 10px;
		border-radius: 3px;
		margin-right: 10px;
	}
	
	.mui-preview-image.mui-fullscreen {
		position: fixed;
		z-index: 20;
		background-color: #000;
	}
	
	.mui-preview-header,
	.mui-preview-footer {
		position: absolute;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	
	.mui-preview-header {
		height: 44px;
		bottom: 0;
	}
	
	.mui-preview-footer {
		height: 50px;
		bottom: 0px;
	}
	
	.mui-preview-header .mui-preview-indicator {
		display: block;
		line-height: 25px;
		color: #fff;
		text-align: center;
		margin: 15px auto 4;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 12px;
		font-size: 16px;
	}
	
	.mui-preview-image {
		display: none;
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
	.mui-preview-image.mui-preview-in {
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}
	
	.mui-preview-image.mui-preview-out {
		background: none;
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
	}
	
	.mui-preview-image.mui-preview-out .mui-preview-header,
	.mui-preview-image.mui-preview-out .mui-preview-footer {
		display: none;
	}
	
	.mui-zoom-scroller {
		position: absolute;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		-webkit-backface-visibility: hidden;
	}
	
	.mui-zoom {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	
	.mui-slider .mui-slider-group .mui-slider-item img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
	
	.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
		width: 100%;
	}
	
	.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
		display: inline-table;
	}
	
	.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
		display: table-cell;
		vertical-align: middle;
	}
	
	.mui-preview-loading {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
	}
	
	.mui-preview-loading.mui-active {
		display: block;
	}
	
	.mui-preview-loading .mui-spinner-white {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -25px;
		margin-top: -25px;
		height: 50px;
		width: 50px;
	}
	
	.mui-preview-image img.mui-transitioning {
		-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
		transition: transform 0.5s ease, opacity 0.5s ease;
	}
	
	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	@-webkit-keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	
	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	
	.local-center {
		font-size: 12px;
		color: #777;
		text-indent: 2em;
		padding: 0 15px;
	}
	.rArrow {
		color: #C6C6C6;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		background-color: #333;
		height: 60px;
		width: 100%;
		z-index: 999;
		display: flex;
	}
	.bottom div{
		flex: 1;
		text-align: center;
		line-height: 60px;
		color: #fff;
	}
	.bottom div:first-child {
		background-color: #FE6638;
	}
	.huixing {
		margin-bottom: 50px;
	}
	.swiperTop {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 9999;
	}
	.swiperTop>div {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		height: 300px;
		background-color: #fff;
		text-align: center;
	}
	.swiperTop>div img {
		height: 100%;
		width: auto;
	}
	.leidatuSwiper {
		width: 100%;
		height: 78vw;
		overflow: hidden;
	}
	.swiper-leidatu {
		height: 100%;
		background-color: #fff;
	}
</style>